<template>
	<view class="">
		<view class="user-list">
			<block v-for="(item,index) in list" :key="index">
				<view class="user-list-item" hover-class="active" @tap.stop="Switch_account(item,index)">
					
					<view class="list-l">
						<view class="list-l-radio  animated fast fadeIn" v-if="showDetele && index!=indexs">
							<i class="icon iconfont" :class="[item.choose?'iconxianshi_xuanzetianchong':'iconxuanze']"></i>
						</view>
						<image src="../../static/imgs/avatar.png" mode="widthFix" lazy-load></image>
						
						<view class="list-l-content">
							<view>{{item.username}}</view>
						</view>
					</view>
					<i class="icon iconfont iconjixuduihuan" v-if="!item.istrue"></i>
				</view>
			</block>
		</view>
		
		<!-- <view class="footer-btn animated fast fadeIn" v-if="showDetele">
			<button type="default" @tap.stop="showDetele=!showDetele">{{i18n.cancel}}</button>
			<button type="default" @tap.stop="deleteItem">删除</button>
		</view>	 -->
		
		<view class="mask-select animated fast fadeIn" v-if="showDetele" @tap.stop="showDetele=false">
			<view class="mask-select-contant" @tap.stop="''">
				<view class="mask-select-content">
					<view class="mask-select-t">
						{{i18n.messgae}}
					</view>
					
					<view class="mask-select-nav">
						<button type="default" hover-class="active" @tap.stop="switch_user">{{i18n.Switch_account}}</button>
						<!-- <button type="default" hover-class="active" @tap.stop="deleteItem">{{i18n.Delete_account}}</button> -->
						<button type="default" hover-class="active" @tap.stop="showDetele=false">{{i18n.cancel}}</button>
					</view>
				</view>
			</view>
		</view>
		
		<view class="create-btn">
			<button @tap.stop="created" hover-class="active">{{i18n.Create_a_wallet}}</button>
		</view>
		
	</view>
</template>

<script>
	import {pageto, showToast, fetch, updownLine, forceUpdate, diff_txt, _updataTabBar} from '@/common/js/util.js'
	import {mapGetters, mapMutations} from 'vuex' 
	export default {
		data() {
			return {
				list:[],
				isCheck:false,
				showLoad:false,
				showDetele:false,
				cur:{},
				index:0
			}
		},
		computed:{
			i18n() {
				return this.$t('message')
			},
			...mapGetters([
				'getRequestUrl',
				'getLangType',
				'getLogin',
				'getLoginInfo',
				'getUserlist',
				'getLang'
			])
		},
		onShow(){
			uni.setNavigationBarTitle({
				title:this.getLang==1?'钱包管理':'Wallet management'
			})
			this.showLoad=false;
			this.isCheck=false;
			this.list = this.getUserlist
			this.list.forEach((item,index)=>{
				this.list[index].choose = false;
				if(item.username==this.getLoginInfo.username){
					this.indexs = index;
					this.list[index].istrue = true;
				}else{
					this.list[index].istrue = false;
				}
			})
			this.$forceUpdate()
		},
		methods:{
			
			created(){
				uni.navigateTo({
					url:'./register'
				})
			},
			...mapMutations(['setUserlist','setLoginInfo','setLogin']),
			Switch_account(item,index){
				if(item.username==this.getLoginInfo.username)return
				this.showDetele=true;
				this.cur=item
				this.index=index
			},
			deleteItem(){
				let item = this.cur
				let index = this.index
				let lsit  = this.list.filter(item=>item.choose==false)
				this.setUserlist(lsit)
				showToast(this.getLang==1?'删除成功':'successfully deleted')
				setTimeout(()=>{
					this.indexs = 0
					this.showDetele = false;
					this.isCheck = false;
					this.showLoad=false;
					this.list = this.getUserList
					this.list.forEach((item,index)=>{
						this.list[index].choose = false;
						if(item.username==this.getLoginInfo.username){
							this.indexs = index;
							this.list[index].istrue = true;
						}else{
							this.list[index].istrue = false;
						}
					})
				},500)
			},
			
			switch_user(){
				let item = this.cur
				let index = this.index
				// if(this.showDetele==true){
				// 	console.log(this.list[index].choose);
				// 	this.list[index].choose = !this.list[index].choose;
				// 	this.$set(this.list, index, this.list[index])
				// 	return
				// }
				// showToast(item.istrue);return
				if(item.istrue==true)return;
				this.setLoginInfo('');
				this.setLogin('');
				this.showLoad = true
				let _data = {
					username: item.username,
					password: item.password,
					lang_type: this.getLang
				}
				if(this.isCheck) return
				this.isCheck  = true;
				// showToast('11')
				fetch(this.getRequestUrl +'/api/login/login', _data, "post")
					.then(res => {
						this.isCheck  = false;
						this.showLoad = false
						if (res.statusCode == 200 && res.data.code == 1) {
							this.showDetele = false;
							// showToast('切换成功')
							showToast(this.getLang==1?'切换成功':'Switch successfully')
							let {email, id, incode, password, paypwd, salt, status, token, username, gespwd, yqcode, pay_key} = res.data.data
							let loginfo = {email, id, incode, password, paypwd, salt, status, token, username, gespwd, yqcode, pay_key}
				
							this.setLoginInfo(loginfo)
							this.setLogin({
								username: item.username,
								password: item.password
							})
							this.list.forEach((item,index)=>{
								// this.list[index].address_ = this.asterisksCard(item.address)
								this.list[index].choose = false;
								if(item.username==this.getLoginInfo.username){
									this.indexs = index;
									this.list[index].istrue = true;
								}else{
									this.list[index].istrue = false;
								}
							})
						} else {
							showToast(res.data.msg)
						}
					})
					.catch(err => {
						this.isCheck  = false;
						this.showLoad = false
					})
		},
		}
	}
</script>
<style>
	page{
		background: #f6f6f6 !important;
	}
</style>
<style lang="scss" scoped>
	.create-btn{
		margin: 100rpx 30rpx;
		button{
			line-height: 88rpx;
			height: 88rpx;
			border-radius: 8rpx;
			background: #39476E;
			color: #ffffff;
			&.active{
				background: #D1D1D1;
			}
		}
	}
	.mask-select{
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,.4);
		z-index: 10;
		.mask-select-contant{
			position: fixed;
			top: 50%;
			left: 50%;
			width: 650rpx;
			z-index: 12;
			background: #FFFFFF;
			border-radius: 20rpx;
			transform: translate(-50%,-50%);
			.mask-select-content{
				.mask-select-t{
					line-height: 100rpx;
					font-size: 30rpx;
					color: #929292;
					text-align: center;
					border-bottom: 1rpx solid #f6f6f6;
				}
				.mask-select-nav{
					padding: 40rpx 30rpx 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					align-items: center;
					button{
						flex: 1;
						margin-right: 15rpx;
						line-height: 64rpx;
						font-size: 28rpx;
						padding: 0;
						color: #ffffff;
						background: #f00;
						&:first-of-type{
							background: #294362;
						}
						&:last-of-type{
							background: #e4e4e4;
							color: #929292;
							margin-right: 0;
						}
						&.active{
							background: #c9c9ca;
							color: #666666;
							opacity: .95;
							transform: scale(.95);
						}
					}
				}
			}
		}
	}
	.show-pwd-content{
			padding: 40rpx 0;
			.show-pwd-title{
				width: 600rpx;
				line-height: 80rpx;
				// text-align: center;
				padding-left: 40rpx;
				font-size: 26rpx;
				color: #C0C1CE;
			}
			.show-pwd-input{
				display: flex;
				align-items: center;
				justify-content: space-between;
				border: 1rpx solid #dfe2e5;
				margin: 0 20rpx 30rpx;
				border-radius: 8rpx;
				input{
					flex: 1;
					height: 80rpx;
					line-height: 80rpx;
					border: none;
					padding: 0 20rpx;
				}
				.icon{
					width: 100rpx;
					line-height: 80rpx;
					text-align: center;
				}
			}
		}
		
		.footer-btn{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 750rpx;
			position: fixed;
			left: 0;
			bottom: 0;
			line-height: 100rpx;
			padding: 10rpx 0;
			background: #ffffff;
			box-shadow: 0 0 20rpx rgba(0,0,0,.1);
			button{
				line-height: 80rpx;
				height: 80rpx;
				text-align: center;
				width: 200rpx;
				border-radius:10rpx;
				background: #FF5050;
				color: #ffffff;
				&:first-of-type{
					background: #5a5a5a;
					margin-right: 40rpx;
				}
			}
			
		}
		.right-nav-color{
			padding: 0 30upx 0 0;
			color: #666666;
		}
		.user-list{
			margin-top: 20rpx;
			color: #666666;
			.user-list-item{
				border-bottom: 1rpx solid #f2f2f6;
				&.active{
					background: #f2f2f6;
				}
				&:last-of-type{
					border-bottom: none;
				}
				background: #ffffff;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 30rpx;
				.list-l{
					display: flex;
					align-items: center;
					.list-l-radio{
						.icon{
							font-size: 40rpx;
							margin-right: 15rpx;
						}
					}
					.list-l-content{
						view{
							font-size: 32rpx;
							margin-bottom: 10rpx;
						}
						text{
							font-size: 26rpx;
							color: #C0C1CE;
						}
					}
					image{
						width: 50rpx;
						height: 50rpx;
						border-radius: 25rpx;
						margin-right: 15rpx;
					}
				}
			}
		}
		.change-list{
			&.change-list-up{
				margin-top: 20rpx;
			}
			&.change-list-other{
				margin-bottom: 0;
			}
			&.active{
				background: #f2f2f6;
			}
			color: #666666;
			margin-top: 50rpx;
			background: #ffffff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 30rpx;
			margin-bottom: 110rpx;
			.list-l{
				display: flex;
				align-items: center;
				text{
					line-height: 50rpx;
				}
				image{
					width: 50rpx;
					height: 50rpx;
					border-radius: 25rpx;
					margin-right: 15rpx;
				}
			}
		}
</style>
